<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SmallSlider--jQuery Plugin for image slide -- js 图片轮播 jQuery插件 </title>
        <meta name="keywords" content="图片轮播 js jQuery插件" />
        <meta name="description" content="js图片轮播jQuery插件" />
        <meta name="generator" content="NetBeans IDE 6.8" />
        <meta name="author" content="sinrow" />
        <meta name="copyright" content="sinrow" />
	<link rel="stylesheet" type="text/css" href="rs/css/common.css" media="screen, projection" />
        <link rel="stylesheet" type="text/css" href="rs/css/smallslider.css" media="screen, projection" />
	<link rel="stylesheet" type="text/css" href="rs/css/lab.css" media="screen, projection" />
        <script type="text/javascript" src="rs/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="rs/js/jquery.smallslider.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){

 		$('#flashbox').smallslider({onImageStop:false, switchEffect:'ease',switchEase: 'easeOutBounce',switchPath: 'up', switchMode: 'hover', textSwitch:2, textPosition: 'top', textAlign:'center'});

 		$('#exp1').smallslider();
 				
 		$('#exp2').smallslider({ onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2 });
 		
 		$('#exp3').smallslider({ showButtons:false, showText : true, switchEffect:'ease',switchEase: 'easeOutCirc',switchPath: 'up', textSwitch:1,textAlign:'center'});

            });
        </script>
    </head>
    <body>
        <div id="main">
       	     <div id="header">
       	     		<h1><span>Follow me : <a href="http://www.twitter.com/sinrow" target="_blank">sinrow@twitter.com</a></span>SmallSlider 图片轮播插件</h1>
       	     		<p>Version 0.5 最后更新：2010年12月6日</p>
            </div>
            <div id="nav">
		<ul>
		    <li><a href="#example">示例</a></li>
		    <li><a href="#parameter">参数</a></li>
		    <li><a href="#download">下载</a></li>
		    <li class="first"><a href="../book/">留言</a></li>
		</ul>
	    </div>
            <div id="contain">
		<div class="section">
		    <p>某天，在网上闲逛，碰到一个Slider的jquery插件，受其启发，改写成了这个插件smallSlider插件，几经修改，最后成了现在这个。
			2009年7月3日，发布第一版，0.4版本发布，基本上符合标准jquery插件开发，由于小弟能力有限，暂时实现了基本的切换效果，
			特效方面稍显不足，源码公布网上，期待有高人继续能改进，多加进切换特效。</p>
		</div>
		<div class="update">
		    <h2>更新</h2>
		    <p><span>2010-12-06</span>0.5版本新增加actionGap延时选项，部分解决快速滑动时的闪烁问题。</p>
		    <p><span>2010-03-15</span>0.4版本代码全部翻新，更加符合jquery插件标准写法，修复部分切换过度问题 </p>
		    <p><span>2010-03-11</span>0.3版本升级分离了标题显示，标题可以选择独立出来切换，使其更加接近flash切换 </p>
		    <p><span>2010-02-02</span>0.2版本升级添加滑动切换效果，修复切换过度不自然问题。</p>
		    <p><span>2009-07-03</span>0.1版本2009-07-3月首发，实现基本切换效果。</p>
		</div>
		<div class="compatible">
			<span class="ie"><img src="rs/images/IE.png" alt="IE" /> <em>IE 6+</em></span>
			<span class="firefox"><img src="rs/images/Firefox.png" alt="Firefox" /> <em>Firefox 3+</em></span>
			<span class="chrome"><img src="rs/images/Chrome.png" alt="Chrome" /> <em>Chrome 3+</em></span>
			<span class="safari"><img src="rs/images/Safari.png" alt="Safari" /> <em>Safari 3+</em></span>
			<span class="opera"><img src="rs/images/Opera.png" alt="Opera" /> <em>Opera 9.5+</em></span>
		</div>
            	 <h2>特点</h2>
            	 <div class="box">  	 
			 <ol class="list">
				<li>调用简单：只需标准的HTML代码加一句 js代码，无须任何附加代码</li>
				<li>个性定制：按钮和标题显示的位置可以随意定制</li>
				<li>特效切换：透明变幻或滑动切换，切换更加自然</li>
				<li>安全代码：经过数小时Leak Monitor内存泄漏测试，绝对没有内存泄漏问题</li>
				<li>多个轮播：经封装的轮播写法，支持页面上同时有多个轮播图</li>
			 </ol>
        	 </div>
		 <div id="d"></div>
        	 <h2>先看看效果：</h2>
        	 	<div class="expo">
        	 		<div id="flashbox" class="smallslider">
				       <ul>
				           <li><a href="rs/images/001.jpg"><img src="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
				           <li><a href="rs/images/002.jpg"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
				           <li><a href="rs/images/003.jpg"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
				           <li><a href="rs/images/004.jpg"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
				           <li><a href="rs/images/005.jpg"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
				       </ul>
				 </div>
        	 	</div>
        	 	<p>要做到上面的效果，只需要标准的html代码，加上一句js调用即可，按钮和标题完全由js生成，不需额外写任何代码</p>
        	 <h2>示例代码：</h2>
        	 <div class="code">
        	 	<h2>HTML部分</h2>
			<div class="insertcode">
			    <div class="codetit">HTML代码：</div>
			    <ol class="html4strict lang-html4strict">
				<li style="font-weight: normal;">
				    <div style="">
					<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span> <span style="color: rgb(0, 0, 102);">id</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;flashbox&quot;</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;smallslider&quot;</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">ul</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; &nbsp; &nbsp;<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">a</span> <span style="color: rgb(0, 0, 102);">href</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;#&quot;</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">img</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;rs/images/001.jpg&quot;</span> <span style="color: rgb(0, 0, 102);">title</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;&quot;</span> <span style="color: rgb(0, 0, 102);">alt</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;图片标题1&quot;</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">a</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; &nbsp; &nbsp;<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">a</span> <span style="color: rgb(0, 0, 102);">href</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;#&quot;</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">img</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;rs/images/002.jpg&quot;</span> <span style="color: rgb(0, 0, 102);">title</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;&quot;</span> <span style="color: rgb(0, 0, 102);">alt</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;图片标题2&quot;</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">a</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; &nbsp; &nbsp;<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">a</span> <span style="color: rgb(0, 0, 102);">href</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;#&quot;</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">img</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;rs/images/003.jpg&quot;</span> <span style="color: rgb(0, 0, 102);">title</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;&quot;</span> <span style="color: rgb(0, 0, 102);">alt</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;图片标题3&quot;</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">a</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; &nbsp; &nbsp;<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">a</span> <span style="color: rgb(0, 0, 102);">href</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;#&quot;</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">img</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;rs/images/004.jpg&quot;</span> <span style="color: rgb(0, 0, 102);">title</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;&quot;</span> <span style="color: rgb(0, 0, 102);">alt</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;图片标题4&quot;</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">a</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; &nbsp; &nbsp;<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">a</span> <span style="color: rgb(0, 0, 102);">href</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;#&quot;</span>&gt;&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">img</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;rs/images/005.jpg&quot;</span> <span style="color: rgb(0, 0, 102);">title</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;&quot;</span> <span style="color: rgb(0, 0, 102);">alt</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">&quot;图片标题5&quot;</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">a</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">li</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					&nbsp; <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">ul</span>&gt;</span></div>
				</li>
				<li style="font-weight: normal;">
				    <div style="">
					<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span></div>
				</li>
			    </ol>
			</div>
			<h2>JS部分</h2>
			<div class="insertcode">
			    <div class="codetit">JS代码：</div>
				<ol class="javascript lang-javascript">
				    <li style="font-weight: normal;">
					<div style="">
					    <span style="color: rgb(51, 153, 51);">&lt;</span>script type<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">&quot;text/javascript&quot;</span><span style="color: rgb(51, 153, 51);">&gt;</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: rgb(0, 153, 0);">(</span>document<span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">ready</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">&#39;#flashbox&#39;</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">smallslider</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onImageStop<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(0, 51, 102); font-weight: bold;">false</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchEffect<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(51, 102, 204);">&#39;ease&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchEase<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;easeOutBounce&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchPath<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;up&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchMode<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;hover&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textSwitch<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(204, 0, 0);">2</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textPosition<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;top&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(51, 102, 204);">&#39;center&#39;</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>
				    </li>
				    <li style="font-weight: normal;">
					<div style="">
					    <span style="color: rgb(51, 153, 51);">&lt;/</span>script<span style="color: rgb(51, 153, 51);">&gt;</span></div>
				    </li>
				</ol>
			</div>
        	 </div>
		 <div class="section">
		     <p>
		       怎么样？够简单吧？完全不需要写额外的HTML代码。<br />
		       调用方法：<br />
			    1。保证你的页面链接进3个文件：<br />
				    &nbsp;&nbsp;&lt;script type="text/javascript" src="rs/js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;<br />
				    &nbsp;&nbsp;&lt;script type="text/javascript" src="rs/js/jquery.smallslider.js"&gt;&lt;/script&gt;<br />
				    &nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="rs/css/smallslider.css" media="screen" /&gt;<br />
			    2。HTML 结构如下：<br />
			    &nbsp;&nbsp;1)，最外层必须为一个div元素，这个div需要指定一个class为：smallslider。<br />
			    &nbsp;&nbsp;2)，div内的HTML结构为一个ul标签，ul标签内为li标签，li内为a标签，a内为img标签，即：div---&gt;ul---&gt;li---&gt;a---&gt;img 。<br />
			    &nbsp;&nbsp;3)，img标签的alt属性为显示的标题文字内容，所以必须要有。<br />
			    3，初始化轮播图：<br />
				    &lt;script type="text/javascript"&gt; <br />
					$(document).ready(function(){ <br />
					    &nbsp;&nbsp;&nbsp;&nbsp;$(function(){ <br />
						    &nbsp;&nbsp;&nbsp;&nbsp;$('#flashbox').smallslider(); <br />
					    &nbsp;&nbsp;&nbsp;&nbsp;}); <br />
					&nbsp;&nbsp;&nbsp;&nbsp;});<br />
				    &lt;/script&gt; <br />
		       有一点要注意，就是必须固定你的调用元素的高度和宽度。一般情况下，切换的图片高度和宽度都是固定的，如果你图片大小不一，切换的时候会很难看。<br />
		       如果你有好的建议，请给我发邮件：microji#163.com （请把#换成＠）
		     </p>
		</div>
        	 <a name="parameter"></a>
        	 <h2>参数列表：</h2>
        	 <div class="para">
        	 	<table class="tblist" cellpadding="5" cellspacing="1">
        	 		<tr><th>参数</th><th>默认值</th><th>说明</th></tr>
        	 		<tr><th>time</th><th>3000 </th><td>切换时间间隔，单位毫秒，1秒=1000毫秒</td></tr>
				<tr><th>autoStart</th><th>true</th><td>是否自动开始播放</td></tr>
				<tr><th>onImageStop</th><th>false</th><td> 鼠标放在图片上时，是否停止播放</td></tr>
				<tr><th>switchMode</th><th>'hover'</th><td>图片切换的方式，click为单击切换，hover为鼠标移动到按钮上时切换</td></tr>
				<tr><th>switchEffect</th><th>'fadeOut'</th><td> 切换特效,fadeOut，ease，none,</td></tr>
				<tr><th>switchPath</th><th> 'left'</th><td>切换的方向，可选值为：up ， left ，即向上，向左</td></tr>
				<tr><th>switchEase </th><th> 'easeOutQuart' </th><td>当SwitchEffect为'ease'时可用。可选值列表如下：["easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic",
 "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint",
 "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic",
 "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack",
 "easeInBounce", "easeOutBounce", "easeInOutBounce"]，各种切换方式之间差别不是很大，有兴趣可以逐一测试</td></tr>
				<tr><th>switchTime</th><th>600</th><td> 切换时间，单位毫秒，1秒=1000毫秒</td></tr>
				<tr><th>actionGap</th><th>200</th><td> 鼠标触发延时，单位毫秒</td></tr>
				<tr><th>buttonPosition</th><th>'rightBottom'</th><td>按钮位置表示，共有四个值：leftTop，leftBottom,rightTop,rightBottom</td></tr>
				<tr><th>buttonOffsetX</th><th>10</th><td> 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px</td></tr>
				<tr><th>buttonOffsetY</th><th>4</th><td>竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px</td></tr>
				<tr><th>buttonSpace</th><th>4</th><td> 按钮之间的间隔 单位为像素，但不要加px</td></tr>
				<tr><th>showText</th><th>true</th><td>是否显示标题，如果不显示，则只显示按钮</td></tr>
				<tr><th>showButtons</th><th>true</th><td>是否显示按钮，默认显示</td></tr>
				<tr><th>textLink</th><th>true</th><td>是否给显示的标题加上链接，如果为false，只显示标题，标题不可单击</td></tr>
				<tr><th>textSwitch</th><th>0</th><td> 标题是否运动显示，如果为0则不动，1 标题动，2 标题和背景一起动。</td></tr>
				<tr><th>textPosition</th><th>''</th><td> 标题栏的位置，默认为空，即和按钮的位置一致，取值 top ,  bottom</td></tr>
				<tr><th>textAlign</th><th>'center'</th><td>标题栏取 top 或 bottom 时，有效，left, center, right</td></tr>
        	 	</table>	
        	 </div>
        	 <a name="example"></a>
        	 <h2>一组实例：</h2>
        	 <div class="expoes">
		     <div class="expo" id="expo1">
			 	<div id="exp1" class="exmp smallslider">
					<ul>
					       <li><a href="rs/images/001.jpg"><img src="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
					       <li><a href="rs/images/002.jpg"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
					       <li><a href="rs/images/003.jpg"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
					       <li><a href="rs/images/004.jpg"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
					       <li><a href="rs/images/005.jpg"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
					 </ul>
				</div>
			     <div class="exmp-txt">
				 <div class="insertcode">
				     <div class="codetit">javascript代码</div>
					 <ol class="javascript lang-javascript">
					     <li style="font-weight: normal;">
						 <div style="">
						     <span style="color: rgb(0, 102, 0); font-style: italic;">//完全默认参数：</span></div>
					     </li>
					     <li style="font-weight: normal;">
						 <div style="">
						    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">&#39;#exp1&#39;</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">smallslider</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>
					     </li>
					 </ol>
				 </div>
			     </div>
				<div class="clearit"></div>
			</div>
			<!-- end.exp1 -->
			<div class="expo"  id="expo2">
			 	<div id="exp2" class="exmp smallslider">
					<ul>
					       <li><a href="rs/images/001.jpg"><img src="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
					       <li><a href="rs/images/002.jpg"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
					       <li><a href="rs/images/003.jpg"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
					       <li><a href="rs/images/004.jpg"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
					       <li><a href="rs/images/005.jpg"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
					 </ul>
				</div>
				<div class="exmp-txt">
				    <div class="insertcode">
					<div class="codetit">javascript代码</div>
					    <ol class="javascript lang-javascript">
						<li style="font-weight: normal;">
						    <div style="">
							<span style="color: rgb(0, 102, 0); font-style: italic;">// 鼠标放在图片上停止切换，向左切换</span></div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">&#39;#exp2&#39;</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">smallslider</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span></div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; onImageStop<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(51, 153, 51);">,</span></div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; switchEffect<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(51, 102, 204);">&#39;ease&#39;</span><span style="color: rgb(51, 153, 51);">,</span>switchEase<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;easeOutSine&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; switchPath<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;left&#39;</span><span style="color: rgb(51, 153, 51);">,</span>switchMode<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;hover&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; showText<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(51, 153, 51);">,</span>textSwitch<span style="color: rgb(51, 153, 51);">:</span>2</div>
						</li>
						<li style="font-weight: normal;">
						    <div style="">
							&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>
						</li>
					    </ol>
				    </div>
				</div>
				<div class="clearit"></div>
			</div>
			<!-- end.exp3 -->
			<div class="expo">
			 	<div id="exp3" class="exmp smallslider">
					<ul>
					       <li><a href="rs/images/001.jpg"><img src="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
					       <li><a href="rs/images/002.jpg"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
					       <li><a href="rs/images/003.jpg"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
					       <li><a href="rs/images/004.jpg"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
					       <li><a href="rs/images/005.jpg"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
					 </ul>
				</div>
				<div class="exmp-txt">
				    <div class="insertcode">
					<div class="codetit">javascript代码</div>
					<ol class="javascript lang-javascript">
					    <li style="font-weight: normal;">
						<div style="">
						    <span style="color: rgb(0, 102, 0); font-style: italic;">// 只显示文字，不显示按钮，文字切换，文字背景不动</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">&#39;#exp3&#39;</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">smallslider</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; showButtons<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(0, 51, 102); font-weight: bold;">false</span><span style="color: rgb(51, 153, 51);">,</span> showText <span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(51, 153, 51);">,</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; switchEffect<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(51, 102, 204);">&#39;ease&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; switchEase<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;easeOutCirc&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; switchPath<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">&#39;up&#39;</span><span style="color: rgb(51, 153, 51);">,</span></div>
					    </li>
					    <li style="font-weight: normal;">
						<div style="">
						    &nbsp; &nbsp; &nbsp; &nbsp; textSwitch<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(204, 0, 0);">1</span><span style="color: rgb(51, 153, 51);">,</span>textAlign<span style="color: rgb(51, 153, 51);">:</span><span style="color: rgb(51, 102, 204);">&#39;center&#39;</span><span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>
					    </li>
					</ol>
				    </div>
				</div>
				<div class="clearit"></div>
			</div>
        	 </div>
		 <a name="download"></a>
		 <div id="down">
		     <h2>下载</h2>
		     <p>
			  <a href="smallslider.0.5.tar.bz2 ">下载 ( .tar.bz2 425KB)</a>
		     </p>
		 </div>
            </div><!-- end.contain -->
	     <div id="footer" class="span-24 last center">
	     	      <p>&copy; 2010 作者：Jesse，联系我：microji#163.com （请把#换成@），或 <a href="../book/" target="_blank">在线留言</a></p>
		      <p>
                            <a target="_blank" href="http://validator.w3.org/check?uri=referer">
                                <img alt="Valid XHTML 1.0 Transitional" src="rs/images/valid-xhtml-blue.png" />
                            </a>
                            <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">
                                <img alt="Valid CSS!" src="rs/images/valid-css-blue.gif" />
                            </a>
                     </p>
	</div>
        </div><!-- end.main -->
    </body>
</html>
